<template>
  <div class="container">
    <div>
      <div class="menu-navbar">
        <el-button size="small" type="" @click="cancelSubmit">取消</el-button>
        <el-button size="small" type="primary" @click="createSubmit('appendlist')">确 定</el-button>
        
      </div>
      <div>
        <el-form :model="appendlist" label-position="top" size="small" ref="appendlist" :rules="appendrules" label-width="110px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="登录名称" prop="loginName">
                <el-input  v-model="appendlist.loginName" placeholder="登录名称" :disabled="true"></el-input>
                
              </el-form-item>
               
            </el-col>
            <el-col :span="2">
              
               <div class="select-container">
                   <el-button size="mini" type="text" @click="selectLoginName" style="margin-top: 40px;">选择</el-button>
                </div>
                
              
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="业务系统" prop="systemId">
                
                <el-select placeholder="请选择业务系统"  v-model="appendlist.systemId" clearable :disabled="false">
                  <el-option v-for="item in systemList" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="第三方系统登录名" prop="thirdLoginName" >
                <el-input  v-model="appendlist.thirdLoginName" placeholder="第三方系统登录名" ></el-input>
              </el-form-item>
            </el-col>
            
          </el-row>
          <el-row :gutter="20">
            
            <el-col :span="12">
              <el-form-item label="第三方系统登录密码" prop="thirdPassword">
                <el-input v-model="appendlist.thirdPassword" type="password"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-dialog
            title="选择人员"
            :visible.sync="dialogVisible"
            top="5vh"
            width="80%">
            <el-row>
              <el-col :span="8">
                <el-tree ref='tree'
                        :data="treeData"
                        style="height: 400px; overflow: scroll"
                        :props="defaultProps"
                        :expand-on-click-node='false'
                        @node-click="handleNodeClick"
                        node-key="id"
                        :highlight-current='true'
                        :default-expand-all='true'></el-tree>
              </el-col>
              <el-col :span="16">
                <el-table
                  :data="userDataDemo"
                  size="small"
                  style="width: 100%;height: 330px; overflow: auto;border:#eeeeee">
                  <el-table-column
                    prop="loginName"
                    label="登录名"
                    width="180">
                  </el-table-column>

                  <el-table-column
                    prop="name"
                    label="用户名称"
                    width="180">
                  </el-table-column>

                  <el-table-column
                    prop="nameEn"
                    label="用户名称英文">
                  </el-table-column>

                  <el-table-column
                    prop="orgId"
                    label="用户机构ID">
                  </el-table-column>
                  <el-table-column
                    prop="code"
                    label="用户编码">
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                      <el-button @click="handleClick(scope.row)" type="text" size="small">选择</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="pagination-container">
                  <el-pagination background @size-change="handleSizeChangeDemo"
                                @current-change="handleCurrentChangeDemo"
                                :page-sizes="[10,20,30, 50]"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalDemo">
                  </el-pagination>
                </div>
              </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
              <el-button size="small" @click="dialogVisible = false">关 闭</el-button>
            </span>
          </el-dialog>
        </el-form>
        
      </div>
    </div>
  </div>
  
</template>
<script>

import {
  selectSysSubsys
} from '@/api/systemManage/roleManagement'
import {
  systemUserMappingInsert,
  getNoSelectedUsers,
  systemUserMappingCompositeSelect
} from '@/api/bussSystemManage/systemUserMapping'
import {
  
  treeByParentId
 
} from '@/api/bussSystemManage/orgTreeExt'
  export default {
    data() {
      return {
        treeData: [],
      
        dialogVisible: false,
        defaultProps: {
          children: 'children',
          label: 'name'
        },

         userDataDemo: [],
         totalDemo: 0,
         listQueryDemo: {
        rowBounds: {
          offset: 0,
          limit: 10
        },
        condition: [            
        {
          'property': 'orgId',
          'value': '',
          'type': 'EQ'
        }],
        fields: [
        ],
        sort: [{
          direction: 'ASC',
          property: 'orderNo'
        }]
      },
      
         
         loading: false,
          dropdownParams: {
        condition: [{
          'property': 'status',
          'value': '2',
          'type': 'NE'
        },{
          'property': 'userId',
          'value': this.$store.getters.userid,
          'type': 'EQ'
        }]
      },
      systemList:[],

        appendlist: {
          id: '',
          systemId: '',
          loginName: '',
          thirdLoginName: '',
          thirdPassword: ''

        },
        appendrules: {
          systemId: [
            { message: '业务系统名称不能为空', required: true, trigger: 'blur' }
          ],
          loginName: [
            { message: '登录名称不能为空', required: true, trigger: 'blur' }
          ],
          thirdLoginName: [
            { message: '第三方系统登录名称不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ],
          thirdPassword: [
            { message: '第三方系统登录密码不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur' }
          ]
        },
        
         
      }
    },
    // 画面刚进入method
  created() {
    
    this.getDropdownList()
  },
    methods: {
      getDropdownList() {

      this.loading = true
      
      const query = {
        sort: [
          {
            direction: 'ASC',
            property: 'id'
          }
        ]
      }

      selectSysSubsys(query).then(response => {
        const records = response.data.data.records
        if (response.data.data.count > 0) {
          this.systemList = []
          for (const item of records) {
            const input = {}
            input.id = item.id
            input.name = item.name
            this.systemList.push(input)
            console.log(this.systemList)
          }
        }
      })
    },

    selectLoginName(){
      this.dialogVisible = true
      treeByParentId({ parentId: "****",status: "0" }).then(response => {
        this.treeData = response.data.data
      })
    },
    handleNodeClick(data) {
      this.listQueryDemo.condition[0].value = data.id
      this.listQueryDemo.systemId = data.id
      getNoSelectedUsers(this.listQueryDemo).then(response => {
        this.userDataDemo = response.data.data.records
        this.totalDemo = response.data.data.count
      })
    },
    handleClick(row) {
      this.dialogVisible = false
      this.appendlist.loginName = row.loginName
      
    },
    // 翻页器使用
    handleSizeChangeDemo(val) {
      this.listQueryDemo.rowBounds.limit = val
      getNoSelectedUsers(this.listQueryDemo).then(response => {
        this.userDataDemo = response.data.data.records
        this.totalDemo = response.data.data.count
      })
    },
    // 翻页器使用
    handleCurrentChangeDemo(val) {
      this.listQueryDemo.rowBounds.offset =
        this.listQueryDemo.rowBounds.limit * (val - 1)
      getNoSelectedUsers(this.listQueryDemo).then(response => {
        this.userDataDemo = response.data.data.records
        this.totalDemo = response.data.data.count
      })
    },
      
      createSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

           
           var param={condition:[]}

          param.condition.push({
              'property': 'systemId',
              'value': this.appendlist.systemId,
              'type': 'EQ'
            })
            param.condition.push({
              'property': 'loginName',
              'value': this.appendlist.loginName,
              'type': 'EQ'
            })
          
        
          systemUserMappingCompositeSelect(param).then(response => {
            
            var cnt = response.data.data.count

             if(cnt==0){
                     systemUserMappingInsert(this.appendlist).then(res => {
                        this.$router.push({
                        name: 'systemUserMapping'
                      })
                      this.$message({
                        type: 'success',
                        message: '添加成功!'
                      })
                        
                      }).catch((err) => {
                        console.log(err)
                        this.$message({
                        type: 'danger',
                        message: '添加失败!'
                      })
                    })
             }else{
              alert("该人员已绑定!")
            }

           
          }).catch((errx) => {
            console.log(errx)
          })

           
           
          } else {
            this.$message({
              type: 'danger',
              message: '添加失败!'
            })
            console.log('error submit!!')
            return false
          }
        })
      },


     

      
      
      
      cancelSubmit() {
        this.$router.push({
          name: 'systemUserMapping'
        })
      },
      
     
    }
  }
</script>
<style scoped>
  .menu-navbar{
    padding:0 0 20px;
    text-align: right;
  }
  .container{
    padding: 20px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
